陣列 Array 與常見方法

• • 陣列用 [] 建立，元素之間用，分隔。
• 陣列可以存 任何型態。
• 陣列是「有順序的集合」，每個值都有一個「索引 (index)」，從 0 開始。
  常見方法

1. 新增與刪除

let arr = ["A", "B", "C"];

arr.push("D");   // 加到最後
console.log(arr); // ["A","B","C","D"]

arr.pop();       // 移除最後
console.log(arr); // ["A","B","C"]

arr.unshift("Z"); // 加到最前
console.log(arr); // ["Z","A","B","C"]

arr.shift();      // 移除最前
console.log(arr); // ["A","B","C"]

2. 找位置

console.log(arr.indexOf("B")); // 1
console.log(arr.includes("C")); // true

3. 切割與合併

let nums = [1, 2, 3, 4, 5];
console.log(nums.slice(1, 3)); // [2,3] (不包含索引3)
nums.splice(2, 1, 99); // 從索引2開始，刪1個，插入99
console.log(nums); // [1,2,99,4,5]
let more = [6, 7];
console.log(nums.concat(more)); // [1,2,99,4,5,6,7]

4. 轉字串

let fruits = ["蘋果", "香蕉", "芒果"];
console.log(fruits.join(", ")); // "蘋果, 香蕉, 芒果"

5. 走訪陣列
   for 迴圈

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

forEach 方法

fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

map 方法（回傳新陣列）

let upper = fruits.map(fruit => fruit.toUpperCase());
console.log(upper); // ["蘋果","香蕉","芒果"] → 轉大寫（英文才看得出效果）

filter 方法（篩選）

let nums = [10, 20, 30, 40];
let big = nums.filter(n => n > 20);
console.log(big); // [30,40]

reduce 方法（累加/運算）

let sum = nums.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 100

🔹 陣列和網頁的合作
範例：動態建立清單

<div id="list"></div>

<script>
const fruits = ["蘋果", "香蕉", "芒果"];
let html = "<ul>";

fruits.forEach(fruit => {
  html += `<li>${fruit}</li>`;
});

html += "</ul>";
document.getElementById("list").innerHTML = html;
</script>

👉 結果：網頁會顯示一個水果清單。

範例：隨機抽籤

<button onclick="draw()">抽籤</button>
<p id="result"></p>

<script>
const names = ["Sunny", "小美", "小明", "小華"];

function draw() {
  let i = Math.floor(Math.random() * names.length);
  document.getElementById("result").innerText = "中獎的是：" + names[i];
}
</script>

👉 結果：每次按按鈕，隨機選一個名字。